<template>
    <div v-if="info.info">
        <van-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
    <!-- <div v-if="info.info"> -->
        <div class="fixBot">
            <button @click="addCart">添加购物车</button>
        </div>
        
        <van-icon name="star-o" :color="info.collected ? 'red' : ''" @click="collected"  size="30px"/>
        详情页面
        <div v-html="info.info && info.info.goods_desc"></div>
        
        <van-popup v-model="show" position="bottom">
            <div>
                <img :src="info.info.list_pic_url" alt="">
                <van-stepper v-model="number" />
            </div>
        </van-popup>
    </div>
</template>

<script>
import {
    detailaction,
    addcollect,
    addCart
} from "@/api/category/list/info"
export default {
    data() {
        return {
            info:{},
            show:false,
            number:1
        };
    },
    computed: {

    },
    created() {
        this.init()
    },
    mounted() {

    },
    methods: {
        onClickLeft(){
            // this.$router.push("/category/list") // push 前进
            this.$router.go(-1)  // 后退 
        },
        addCart(){
            if(this.show){
                addCart({
                    goodsId:this.$route.params.id,
                    number:this.number,
                    openId:localStorage.getItem("openId")
                })
                .then(res =>{
                    console.log(res)
                })
            }else{
                this.show= !this.show;
            }
          
            
           
        },
        init(){
            detailaction({ // 1小时
                id:this.$route.params.id,
                openId:localStorage.getItem("openId")
            })
            .then(res =>{ 
                console.log(res)
                this.info = res
            })
        },
        collected(){
            addcollect({
                goodsId:this.$route.params.id,
                openId:localStorage.getItem("openId")
            })
            .then(res =>{
                console.log(res)
                this.init()
            })
        }
    },
};
</script>

<style scoped lang="scss">
::v-deep img{
    width: 80%;
}
::v-deep .van-popup--bottom{
    bottom: 100px;
}
.fixBot{
    position: fixed;
    width: 100%;
    padding: 20px;
    left: 0;
    bottom: 0;
    background: #ccc;
    z-index:9999;
}
</style>
